<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/x-icon" href="./favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>繁简转换器</title>
    <script src="./vue.global.js"></script>
    <script src="./opencc-js.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
      }

      .container {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(20px);
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        padding: 40px;
        width: 100%;
        max-width: 1200px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      }

      .title {
        text-align: center;
        color: white;
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 40px;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        background: linear-gradient(45deg, #fff, #e0e7ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      .main-content {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 30px;
        align-items: stretch;
      }

      .textarea-container {
        position: relative;
      }

      .textarea-label {
        color: white;
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 12px;
        display: block;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
      }

      textarea {
        width: 100%;
        height: 400px;
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 16px;
        padding: 20px;
        color: white;
        font-size: 16px;
        line-height: 1.6;
        resize: vertical;
        backdrop-filter: blur(10px);
        transition: all 0.3s ease;
        font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
      }

      textarea:focus {
        outline: none;
        border-color: rgba(255, 255, 255, 0.6);
        background: rgba(255, 255, 255, 0.2);
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
      }

      textarea::placeholder {
        color: rgba(255, 255, 255, 0.6);
      }

      .controls {
        display: flex;
        flex-direction: column;
        gap: 16px;
        justify-content: center;
        align-items: center;
      }

      .btn {
        background: linear-gradient(45deg, #4f46e5, #7c3aed);
        border: none;
        border-radius: 12px;
        color: white;
        padding: 14px 24px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        min-width: 140px;
        position: relative;
        overflow: hidden;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4);
      }

      .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(79, 70, 229, 0.6);
      }

      .btn:active {
        transform: translateY(0);
      }

      .btn-secondary {
        background: linear-gradient(45deg, #059669, #0d9488);
        box-shadow: 0 4px 15px rgba(5, 150, 105, 0.4);
      }

      .btn-secondary:hover {
        box-shadow: 0 8px 25px rgba(5, 150, 105, 0.6);
      }

      .btn-danger {
        background: linear-gradient(45deg, #dc2626, #ef4444);
        box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
      }

      .btn-danger:hover {
        box-shadow: 0 8px 25px rgba(220, 38, 38, 0.6);
      }

      .btn::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s;
      }

      .btn:hover::before {
        left: 100%;
      }

      .status {
        text-align: center;
        margin-top: 20px;
        color: rgba(255, 255, 255, 0.8);
        font-size: 14px;
        min-height: 20px;
      }

      .success {
        color: #10b981;
      }

      .error {
        color: #ef4444;
      }

      @media (max-width: 768px) {
        .main-content {
          grid-template-columns: 1fr;
          gap: 20px;
        }

        .controls {
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: center;
        }

        .btn {
          min-width: 120px;
          padding: 12px 20px;
          font-size: 13px;
        }

        .container {
          padding: 20px;
        }

        .title {
          font-size: 2rem;
          margin-bottom: 30px;
        }
      }

      .word-count {
        position: absolute;
        bottom: 8px;
        right: 12px;
        color: rgba(255, 255, 255, 0.6);
        font-size: 12px;
        pointer-events: none;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="container">
        <h1 class="title">繁简转换器</h1>

        <div class="main-content">
          <!-- 输入区域 -->
          <div class="textarea-container">
            <label class="textarea-label">输入文本</label>
            <textarea v-model="inputText" placeholder="请输入需要转换的中文文本..." @input="onInputChange"></textarea>
            <div class="word-count">{{ inputText.length }} 字符</div>
          </div>

          <!-- 控制按钮 -->
          <div class="controls">
            <button class="btn" @click="convertToTraditional" :disabled="!inputText.trim()">转为繁体</button>
            <button class="btn" @click="convertToSimplified" :disabled="!inputText.trim()">转为简体</button>
            <button class="btn btn-secondary" @click="copyResult" :disabled="!outputText">复制结果</button>
            <button class="btn btn-danger" @click="clearResult">清空结果</button>
          </div>

          <!-- 输出区域 -->
          <div class="textarea-container">
            <label class="textarea-label">转换结果</label>
            <textarea v-model="outputText" placeholder="转换结果将显示在这里..." readonly></textarea>
            <div class="word-count">{{ outputText.length }} 字符</div>
          </div>
        </div>

        <div class="status" :class="statusClass">{{ statusMessage }}</div>
      </div>
    </div>

    <script>
      const { createApp } = Vue

      createApp({
        data() {
          return {
            inputText: "",
            outputText: "",
            statusMessage: "",
            statusClass: "",
            converterCN2T: null,
            converterT2CN: null,
          }
        },
        mounted() {
          // 初始化转换器
          try {
            this.converterCN2T = OpenCC.Converter({ from: "cn", to: "tw" })
            this.converterT2CN = OpenCC.Converter({ from: "tw", to: "cn" })
            this.showStatus("转换器初始化成功", "success")
          } catch (error) {
            this.showStatus("转换器初始化失败", "error")
            console.error("OpenCC initialization error:", error)
          }
        },
        methods: {
          convertToTraditional() {
            if (!this.inputText.trim()) {
              this.showStatus("请输入要转换的文本", "error")
              return
            }

            try {
              this.outputText = this.converterCN2T(this.inputText)
              this.showStatus("转换为繁体成功", "success")
            } catch (error) {
              this.showStatus("转换失败，请检查输入", "error")
              console.error("Conversion error:", error)
            }
          },
          convertToSimplified() {
            if (!this.inputText.trim()) {
              this.showStatus("请输入要转换的文本", "error")
              return
            }

            try {
              this.outputText = this.converterT2CN(this.inputText)
              this.showStatus("转换为简体成功", "success")
            } catch (error) {
              this.showStatus("转换失败，请检查输入", "error")
              console.error("Conversion error:", error)
            }
          },
          async copyResult() {
            if (!this.outputText) {
              this.showStatus("没有可复制的内容", "error")
              return
            }

            try {
              await navigator.clipboard.writeText(this.outputText)
              this.showStatus("复制成功", "success")
            } catch (error) {
              // 降级方案
              const textArea = document.createElement("textarea")
              textArea.value = this.outputText
              document.body.appendChild(textArea)
              textArea.select()
              try {
                document.execCommand("copy")
                this.showStatus("复制成功", "success")
              } catch (fallbackError) {
                this.showStatus("复制失败", "error")
              }
              document.body.removeChild(textArea)
            }
          },
          clearResult() {
            this.inputText = ""
            this.outputText = ""
            this.showStatus("已清空所有内容", "success")
          },
          onInputChange() {
            // 实时清空状态消息
            if (this.statusMessage && this.statusClass !== "error") {
              this.statusMessage = ""
              this.statusClass = ""
            }
          },
          showStatus(message, type) {
            this.statusMessage = message
            this.statusClass = type

            // 3秒后自动清除状态消息
            setTimeout(() => {
              this.statusMessage = ""
              this.statusClass = ""
            }, 3000)
          },
        },
      }).mount("#app")
    </script>
  </body>
</html>
